<script type="text/javascript">
    var plat_index = [];
    var previousPoint = null;
         
    function json2TimeStamp(milliseconds){
        var datetime = new Date();
        datetime.setTime(milliseconds);
        var year=datetime.getFullYear();
           //月份重0开始，所以要加1，当小于10月时，为了显示2位的月份，所以补0
        var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
        var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
        var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
        var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
        var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
        return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
    }

    $.fn.UseTooltip = function () {
        $(this).bind("plothover", function (event, pos, item) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
     
                    $("#tooltip").remove();
                     
                    var x = item.datapoint[0];
                    var y = item.datapoint[1];               
                    //console.log(x+","+y)
                    x=json2TimeStamp(parseInt(x-28800000))
                    showTooltip(item.pageX, item.pageY,
                      x + "<br/>" + item.series.label+":<strong>" + y + "</strong>",item.series.color);
                }
            }
            else { 
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    };

    function showTooltip(x, y, contents,color) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x - 120,
            border: '2px solid '+color,
            padding: '2px',    
            size: '10',  
            'border-radius': '6px 6px 6px 6px',
            'background-color': '#fff',
            opacity: 0.80,
            'z-index':999,
        }).appendTo("body").fadeIn(200);
    }

    function iops_get_data(id, index,obj, url, str){
        {% for cluster in clusters %}
            if ( {{cluster.id}}== id ){
                $.get(id+"/"+url,function(data) {     
                    $.plot(obj, [{label:str,data:data}], plat_index[index]);
                })
            }
        {%endfor%}
    }

    function iops_get_color(index,colors,fillcolor){
        plat_index[index].colors= colors;
        // plat_index[index].series.lines.fillColor=fillcolor; 
        if($("#cluster_io_flow_time").attr("realvalue")=="day")
        {
            plat_index[index].xaxis.tickSize=[2, "hour"];
        }
        else if($("#cluster_io_flow_time").attr("realvalue")=="week")        
        {
            plat_index[index].xaxis.tickSize=[15, "hour"];
        }
        else if($("#cluster_io_flow_time").attr("realvalue")=="month")        
        {
            plat_index[index].xaxis.tickSize=[2.5, "day"];
        }             
    }

    function iops_get_value(id,obj,index,unit,url){
       $.get(id+"/"+url,function(data){
           obj.find("span").text(data[index]+unit);  
           obj.find("span").attr("title", data[index]+unit)
       })        
        
    }
$(function(){	
    $(".cluster_io_plat").each(function(i){
         $(this).attr("mark",i);             
    })
	//plat

    $(".cluster_io_pro .cluster_io_block").click(function(){
        if($(this).find(".cluster_io_plat").css("display")=="none"){
            $(this).find(".backcolorHover").removeClass("backcolorHover");
            $(this).find(".backcolor").addClass("backcolorHover");
            $(this).siblings().find(".backcolorHover").removeClass("backcolorHover"); 
           
        
            $(this).find(".cluster_io_plat").show();  
            $(this).find(".legendPlaceHolder_cluster_io").show();  
            $(this).siblings().find(".cluster_io_plat").hide();  
            $(this).siblings().find(".legendPlaceHolder_cluster_io").hide();  
                 
            var temp=$(this);                    
            plat_index[temp.find(".cluster_io_plat").attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                            return val.toFixed(axis.tickDecimals);
                    };                    
            iops_get_color(temp.find(".cluster_io_plat").attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");          
        
            $.get(temp.find(".cluster_io_pro_div").attr("id")+"/get_iops_"+$("#cluster_io_flow_time").attr("realvalue"),function(data){       
                $.plot(temp.find(".cluster_io_plat"), [{label:"IOPS",data:data}],plat_index[temp.find(".cluster_io_plat").attr("mark")]); 
            })
        
            if( $(this).find(".pro_group_clusterIO li").find("a").length<=0)
                $(this).find(".pro_group_clusterIO li").wrapInner("<a></a>");	      
        
         } 
    });

    $(".cluster_io_pro .cluster_io_block").find(".pro_group_clusterIO li").delegate("a","click",function(){
        $(this).parent().addClass("backcolorHover");
        $(this).parent().parent().siblings("ul").find(".backcolorHover").removeClass("backcolorHover")
        $(this).parent().siblings().removeClass("backcolorHover"); 
    })

    $(".cluster_io_pro .cluster_io_block").find(".pro_group_clusterIO li.io_all").delegate("a","click",function(){	    
        var temp=$(this).parent().parent().siblings("div.cluster_io_plat");	       
        plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                           return val.toFixed(axis.tickDecimals)+" M";
                   };
        iops_get_color(temp.attr("mark"), ["#662D91", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#662D91");
        
        var temp_id=$(this).parent().parent().parent().attr("id");
        iops_get_data(temp_id,temp.attr("mark"),temp,"get_swallow_spit_"+$("#cluster_io_flow_time").attr("realvalue"),"吞吐"); 
        iops_get_value(temp_id,$(this).parent(),3,"MB/s","get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue"));       
    })

    //io_latency  
    $(".cluster_io_pro .cluster_io_block").find(".pro_group_clusterIO li.io_latency").delegate("a","click",function(){  	         	    
        var temp=$(this).parent().parent().siblings("div.cluster_io_plat"); 
        plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
            return val.toFixed(axis.tickDecimals);
        };

        iops_get_color(temp.attr("mark"), ["#D87777", "#D87777"],"#1D6E9B");
        var temp_id=$(this).parent().parent().parent().attr("id");
        $.get(temp_id+"/get_latency", function(data){ 
            $.plot(temp, [{label:"IOPS",data:data}], plat_index[temp.attr("mark")]);
        })
        //iops_get_value(temp_id, $(this).parent(), 0, "", "get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue"));         
    })
    $(".cluster_io_pro .cluster_io_block").find(".pro_group_clusterIO li.read_latency").delegate("a","click",function(){
        var temp=$(this).parent().parent().siblings("div.cluster_io_plat");
        plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
            return val.toFixed(axis.tickDecimals);
        };

        iops_get_color(temp.attr("mark"), ["#D87777", "#D87777"],"#1D6E9B");
        
        var temp_id=$(this).parent().parent().parent().attr("id");
        iops_get_data(temp_id,temp.attr("mark"), temp, "get_read_latency", "read_latency");           
//        iops_get_value(temp_id,$(this).parent(),1,"","get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue"));          
    })

    $(".cluster_io_pro .cluster_io_block").find(".pro_group_clusterIO li.write_latency").delegate("a","click",function(){
        var temp=$(this).parent().parent().siblings("div.cluster_io_plat");
        plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
            return val.toFixed(axis.tickDecimals);
        };
        iops_get_color(temp.attr("mark"), ["#D87777", "#D87777"],"#1D6E9B");
        
        var temp_id=$(this).parent().parent().parent().attr("id");
        iops_get_data(temp_id,temp.attr("mark"), temp, "get_write_latency", "write_latency");           
//        iops_get_value(temp_id,$(this).parent(),1,"","get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue"));          
    })


    //IOPS 
  $(".cluster_io_pro .cluster_io_block").find(".pro_group_clusterIO li.IOPS_all").delegate("a","click",function(){  	         	    
       var temp=$(this).parent().parent().siblings("div.cluster_io_plat"); 
       plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };
       iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");
       var temp_id=$(this).parent().parent().parent().attr("id");
       $.get(temp_id+"/get_iops_"+$("#cluster_io_flow_time").attr("realvalue"),function(data){ 
            $.plot(temp, [{label:"IOPS",data:data}], plat_index[temp.attr("mark")]);
          })
       iops_get_value(temp_id,$(this).parent(),0,"","get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue"));         
  })

  $(".cluster_io_pro .cluster_io_block").find(".pro_group_clusterIO li.IOPS_read").delegate("a","click",function(){
       var temp=$(this).parent().parent().siblings("div.cluster_io_plat");
       plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };
       iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");        

       var temp_id=$(this).parent().parent().parent().attr("id");
       iops_get_data(temp_id,temp.attr("mark"),temp,"get_read_"+$("#cluster_io_flow_time").attr("realvalue"),"r");           
       iops_get_value(temp_id,$(this).parent(),1,"","get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue"));          
       
       })
  $(".cluster_io_pro .cluster_io_block").find(".pro_group_clusterIO li.IOPS_write").delegate("a","click",function(){
       var temp=$(this).parent().parent().siblings("div.cluster_io_plat"); 
       plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };
       iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");        
       
       var temp_id=$(this).parent().parent().parent().attr("id");
       iops_get_data(temp_id,temp.attr("mark"),temp,"get_write_"+$("#cluster_io_flow_time").attr("realvalue"),"w"); 
       iops_get_value(temp_id,$(this).parent(),2,"","get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue"));                          
       })      
       
  $(".cluster_io_pro .cluster_io_block").find(".pro_group_clusterIO li.io_swallow").delegate("a","click",function(){
       var temp=$(this).parent().parent().siblings("div.cluster_io_plat"); 
       plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals)+" M";
                  };
       iops_get_color(temp.attr("mark"),["#662D91", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#662D91");

       var temp_id=$(this).parent().parent().parent().attr("id");
       iops_get_data(temp_id,temp.attr("mark"),temp,"get_swallow_"+$("#cluster_io_flow_time").attr("realvalue"),"in");
       iops_get_value(temp_id,$(this).parent(),4,"MB/s","get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue"));                                          
  })
  $(".cluster_io_pro .cluster_io_block").find(".pro_group_clusterIO li.io_spit").delegate("a","click",function(){
       var temp=$(this).parent().parent().siblings("div.cluster_io_plat"); 
       plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals)+" M";
                  };
       iops_get_color(temp.attr("mark"),["#662D91", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#662D91");
       
       var temp_id=$(this).parent().parent().parent().attr("id");
       iops_get_data(temp_id,temp.attr("mark"),temp,"get_spit_"+$("#cluster_io_flow_time").attr("realvalue"),"out");           
       iops_get_value(temp_id,$(this).parent(),5,"MB/s","get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue"));                             
  })
    $(".cluster_io_plat").hide();
    $(".legendPlaceHolder_cluster_io").hide();
    $("#placeHolder_cluster_io").show();
    $("#legendPlaceHolder_cluster_io").show();
    $("#placeHolder_cluster_io").siblings("ul").find(".backcolor").addClass("backcolorHover");
    if( $("#placeHolder_cluster_io").parent().find(".pro_group_clusterIO li").find("a").length<=0)
        $("#placeHolder_cluster_io").parent().find(".pro_group_clusterIO li").wrapInner("<a></a>");	

   $(".cluster_io_pro .cluster_io_block .cluster_io_plat").each(function(){  
        plat_index[$(this).attr("mark")]= {	         
            colors: ["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
            legend: {
                show:false,
                position: 'ne',
                labelBoxBorderColor: "#000000",
                container: $(this).siblings("#legendPlaceHolder_cluster_io"),
                noColumns: 2	         
            },
            series:{
                lines: {                         
                    fill: true,
                    lineWidth:1,
                    //fillColor: "#1D6E9B",
                }
            },
            xaxis: {
                //show: true,min:0,max:24,ticks:6,tickDecimals:0,
               // transform: function (v) { return -v; }, 
               //  tickLength:3,
                 mode:"time",
               timeformat: "%0m/%0d %0H:%0M ",  
              tickSize:[4, "hour"],
            },
            yaxis: {
              // show: true,min:0,ticks:3,
             //  tickLength:2,
               min:0,
               tickFormatter:function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals) + "MB";
                  },
            },
            grid:{
                backgroundColor:"#fff",
                borderWidth:1,
                borderColor:"#D6D6D6",
                tickColor: "#dedede",
                hoverable:true,
            }
        };  

        var temp=$(this);
        iops_get_color(temp.attr("mark"),["#ffd6b2", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#662D91");
        $.get(temp.parent().attr("id")+"/get_swallow_spit_day",function(data){    
            $.plot(temp, [{label:"吞吐",data:data}], plat_index[temp.attr("mark")]);
        })
        temp.UseTooltip();
   })          

    var time_pro_ppool= window.setInterval(function(){  
        if ($("#interval_tip").hasClass("/summary")){
            iops_get_all_value();
            $(".cluster_io_pro .cluster_io_block .cluster_io_plat").each(function(i){
                var temp=$(this);
                plat_index[i].yaxis.tickFormatter=function formatter(val, axis) {
                    return val.toFixed(axis.tickDecimals);
                };      
                iops_get_color(i,["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");
                $(this).parent().find("li.backcolorHover").find("a").click();
                
            })
        } else {
            clearInterval(time_pro_ppool)
        }
    }, 300000)
    
     var cluster_io_flow_time = [["swallow_spit","吞吐"],['iops_swallow',"in"],['iops_spit',"out"],["read_latency","Read Latency"],["write_latency","Write Latency"]];
  $('#cluster_io_flow_time').rqDropDown({
    "datatype":"local",
    "source":cluster_io_flow_time,
    "onchange":"cluster_io_flow_time_change"
  });  
})

    function iops_get_all_value(){
        $(".cluster_io_pro .cluster_io_pro_div").each(function(){   
            var temp=$(this);      
            var url = temp.attr("id")+"/get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue");
            $.get(url, function(data){ 
            	temp.find("li.read_latency span").text(data[6] + 'μs');
           	temp.find("li.write_latency span").text(data[7] + 'μs');

                temp.find("li.IOPS_all span").text(data[0]);
                temp.find("li.IOPS_read span").text(data[1]);
                temp.find("li.IOPS_write span").text(data[2]);
                temp.find("li.io_all span").text(data[3]+"MB/s");
                temp.find("li.io_swallow span").text(data[4]+"MB/s");
            	temp.find("li.io_spit span").text(data[5]+"MB/s");
                temp.find("li.IOPS_all span").attr("title",data[0]);
                temp.find("li.IOPS_read span").attr("title",data[1]);
                temp.find("li.IOPS_write span").attr("title",data[2]);
                temp.find("li.io_all span").attr("title",data[3]+"MB/s");
                temp.find("li.io_swallow span").attr("title",data[4]+"MB/s");
            	temp.find("li.io_spit span").attr("title",data[5]+"MB/s");

           })
       })
    }
$("#io_day_button").click(function(){
      $(".cluster_io_pro .cluster_io_block .cluster_io_plat").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");
         
             var temp=$(this);
            $("#cluster_io_flow_time").attr("realvalue","day")
            plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };       
            iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");     
            $.get(temp.parent().attr("id")+"/get_swallow_spit_day",function(data){    
                $.plot(temp, [{label:"吞吐",data:data}], plat_index[temp.attr("mark")]);
            })
            iops_get_all_value();
           })  
});
$("#io_week_button").click(function(){
        $(".cluster_io_pro .cluster_io_block .cluster_io_plat").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");

             var temp=$(this);
            $("#cluster_io_flow_time").attr("realvalue","week")
            plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };      

             iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");
            $.get(temp.parent().attr("id")+"/get_iops_week",function(data){    
                $.plot(temp, [{label:"IOPS",data:data}], plat_index[temp.attr("mark")]);
              })
            iops_get_all_value();
           })  
});
$("#io_month_button").click(function(){
        $(".cluster_io_pro .cluster_io_block .cluster_io_plat").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");
           
             var temp=$(this);
            $("#cluster_io_flow_time").attr("realvalue","month")
            plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };
       
             iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");                                     
            
            $.get(temp.parent().attr("id")+"/get_iops_month",function(data){    
                $.plot(temp, [{label:"IOPS",data:data}], plat_index[temp.attr("mark")]);
              })
            iops_get_all_value();
           })  
});
function cluster_io_flow_time_change(name,status){
         if(status=="day"){          
          $(".cluster_io_pro .cluster_io_block .cluster_io_plat").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");
         
             var temp=$(this);
            $("#cluster_io_flow_time").attr("realvalue","day")
            plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };       
            iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");     
            $.get(temp.parent().attr("id")+"/get_swallow_spit_day",function(data){    
                $.plot(temp, [{label:"吞吐",data:data}], plat_index[temp.attr("mark")]);
            })
            iops_get_all_value();
           })  
         }else
         if(status=="week"){ 
          $(".cluster_io_pro .cluster_io_block .cluster_io_plat").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");

             var temp=$(this);
            $("#cluster_io_flow_time").attr("realvalue","week")
            plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };      

             iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");
            $.get(temp.parent().attr("id")+"/get_iops_week",function(data){    
                $.plot(temp, [{label:"IOPS",data:data}], plat_index[temp.attr("mark")]);
              })
            iops_get_all_value();
           })  
         }else
         if(status=="month"){
           $(".cluster_io_pro .cluster_io_block .cluster_io_plat").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");
           
             var temp=$(this);
            $("#cluster_io_flow_time").attr("realvalue","month")
            plat_index[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };
       
             iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");                                     
            
            $.get(temp.parent().attr("id")+"/get_iops_month",function(data){    
                $.plot(temp, [{label:"IOPS",data:data}], plat_index[temp.attr("mark")]);
              })
            iops_get_all_value();
           })  
         }
    }
    /*$(function(){
     var width_ = $(window).width(); 
     if(width_>1090){
         $(".pro_plat").css({width:(width_)*0.38}); 
     }
     if(width_<1090){
         $(".pro_plat").css({width:(width_)*0.35}); 
     }
        $(this).parent().find("li.io_all").find("a").click();
    });*/
         $(".latency_button li").on('click', function() { 
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
    });
</script>   
<div class="panel-heading">
    <a href="#">[['Throughput'|translate]]</a>
    <a href="" class="panel-right-i"><i class="fa fa-gear"></i></a>
    <!--<div style="float:right;">
        <ul class="latency_button">
                <li class="active" id="io_day_button">日</li>
                <li id="io_week_button">周</li>
                <li id="io_month_button">月</li>
            </ul>       
    </div>-->
</div>
<div class="panel-body n_panel-body"  style="height:150px;">
            <div class="pro_wrap ppool_pro cluster_io_pro">
                {% for cluster in clusters %}
                    <div class="pro_block cluster_io_block">
                        
                        <div class="pro_div cluster_io_pro_div"  id={{cluster.id}} style="width:100%">
                            <!--<ul class="pro_group pro_group_1">
                                <li class="IOPS_all backcolor">IOPS:<span title={{cluster.iops}}>{{cluster.iops}}</span></li> 
                                <li class="IOPS_read">r:<span title={{cluster.iops_read}}>{{cluster.iops_read}}</span></li> 
                                <li class="IOPS_write">w:<span title={{cluster.iops_write}}>{{cluster.iops_write}}</span></li>  
                            </ul> --> 
                            <!-- <ul class="pro_group pro_group_clusterIO">      
                                <li class="tt_all io_all backcolor">吞吐:<span title={{cluster.swallow_spit}}MB/s>{{cluster.swallow_spit |default(0, True)}}MB/s</span></li>                
                                <li class="tt_swallow io_swallow">in:<span title={{cluster.iops_swallow}}MB/s>{{cluster.iops_swallow |default(0, True)}}MB/s</span></li>                                
                                <li class="tt_spit io_spit">out:<span title={{cluster.iops_spit}}MB/s>{{cluster.iops_spit |default(0, True)}}MB/s</span></li>  
                                <li class="read_latency">Read Latency:<span >{{cluster.read_latency |default(0, True)}} μs</span></li> 
                                <li class="write_latency">Write Latency:<span>{{cluster.write_latency |default(0, True)}} μs</span></li>  
                            </ul> -->
                           <div class="pro_plat cluster_io_plat" id="placeHolder_cluster_io" style="width:100%;height:218px;position:relative;top:20px;"></div>   
                           <div id="legendPlaceHolder_cluster_io" class="legendPlaceHolder_cluster_io" style="position:absolute;right:30px;"></div>          
                       </div>
                     </div>
                {%endfor%}
            </div>
<div  id="ppool_dialog"></div>
<div class="anchaor_a">
</div>
</div>
